<template>
  <div class="container">
    <div class="content-container"></div>
    <div class="info-container">
      <div class="left-box">
        <img class="text1" src="https://img.js.design/assets/img/67112eb20c8862f00fe90c66.png#7d2edbf504c70101b6f420fa84a0e523" alt="">
        <img class="text5" src="../assets/images/Scene.png" alt="">
        <div class="text2">智选服务</div>
        <div class="text3">务实生活</div>
        <div class="text4">致力于为用户打造一个高效、可靠的服务匹配平台，
          通过丰富的服务选项和智能匹配技术，让用户迅速找到合适的服务</div>
      </div>

      <!--第一页-->
      <form
          v-if="currentPage === 1"
          id="info-form1"
          class="info-form"
      >
        <div class="progress-bar">
          <div class="left"></div>
        </div>
        <div class="title">请先完善您的基本信息 1/4</div>
        <!--姓名-->
        <div class="form-group" style="height: 14.3vh">
          <label class="title" for="name">姓名</label>
          <input class="input" type="text" id="name"
                 v-model="formData.name" placeholder="请输入您的真实姓名"
                 style="top: 4.537vh"
          />
          <!--勾选是否对外显示真实姓名-->
          <input class="showName" type="checkbox" id=""
                 :checked="formData.isNameShow === true"
                 @change="formData.isNameShow = !!$event.target.checked"
          />
          <text class="showNameText">对外显示您的真实姓名</text>
        </div>
        <!--性别-->
        <div class="form-group">
          <label class="title" for="gender">性别</label>
          <input class="choose-input1" type="radio" id="gender1" v-model="formData.gender" value="male" checked/>
          <label class="choose-label1">男</label>
          <input class="choose-input2" type="radio" id="gender2" v-model="formData.gender" value="female" />
          <label class="choose-label2">女</label>
        </div>
        <!--出生年月-->
        <div class="form-group">
          <label class="title" for="birthdate">出生日期</label>
          <input type="text" ref="datePickerRef" class="input" v-model="formData.birthdate" placeholder="选择您的出生日期" />
        </div>
        <!--所在城市-->
        <div class="form-group">
          <label class="title" for="city">所在城市</label>
          <input
              class="input"
              type="text"
              id="city"
              v-model="formData.city"
              placeholder="请输入城市"
              @input="handleCityInput"
              list="city-list"
          />

        </div>
        <button class="next-button" @click="goToNextPage" type="submit" :disabled="isLoading">{{ isLoading ? "提交中..." : "下一步" }}</button>
      </form>

      <!--第二页-->
      <form
          v-else-if="currentPage === 2"
          id="info-form2"
          class="info-form"
      >
        <div class="progress-bar">
          <div class="left" style="width: 50%"></div>
        </div>
        <div class="title">请先完善您的基本信息 2/4</div>
        <!--身份-->
        <div class="form-group">
          <label class="title" for="identity">身份</label>
          <input class="choose-input1" type="radio"
                 id="identity1" v-model.number="formData.identity" :value="1"  checked/>
          <label class="choose-label1">社会人士</label>
          <input class="choose-input2" type="radio"
                 id="identity2" v-model.number="formData.identity"
                 :value="0"  style="left: 8vw"/>
          <label class="choose-label2" style="left: 10vw">在校学生</label>
        </div>
        <!--学校-->
        <div class="form-group">
          <label class="title" for="school" :style="{ opacity: isPublicFigure ? 0.5 : 1 }">就读学校</label>
          <input class="input" type="text" id="school"
                 v-model="formData.school" placeholder="请输入您目前所在学校"
                 :disabled="isPublicFigure"
                 :style="{ opacity: isPublicFigure ? 0.5 : 1 }" />
        </div>
        <!--就读时间-->
        <div class="form-group">
          <label class="title" for="startDate" :style="{ opacity: isPublicFigure ? 0.5 : 1 }">就读时间</label>

          <select class="startDate year-select"
                  id="startDate"
                  v-model="startDate"
                  :disabled="isPublicFigure"
                  :style="{ opacity: isPublicFigure ? 0.5 : 1 }">
            <option v-for="year in years" :key="year" :value="year">{{ year }}</option>
          </select>
          <span class="month-label"
                :style="{ opacity: isPublicFigure ? 0.5 : 1 }"
                style="left: 9vw;">9月</span>
          <div class="zhi" :style="{ opacity: isPublicFigure ? 0.5 : 1 }">至</div>
          <select class="endDate year-select"
                  id="graduateYear"
                  v-model="endDate"
                  :disabled="isPublicFigure"
                  :style="{ opacity: isPublicFigure ? 0.5 : 1 }">
            <option v-for="year in years" :key="year" :value="year">{{ year }}</option>
          </select>
          <span class="month-label" :style="{ opacity: isPublicFigure ? 0.5 : 1 }"
                style="left: 25vw;">6月</span>
        </div>

        <!--微信号-->
        <div class="form-group">
          <label class="title" for="name">微信号</label>
          <input class="input" type="text" id="WeChat"
                 v-model="formData.vxNumber" placeholder="用于交换联系方式"
          />
        </div>
        <button class="back-button" @click="goToPreviousPage">{{ isLoading ? "返回中..." : "上一步" }}</button>
        <button class="next-button" @click="goToNextPage" type="submit" :disabled="isLoading">{{ isLoading ? "提交中..." : "下一步" }}</button>
      </form>

      <!--第三页-->
      <form
          v-else-if="currentPage === 3"
          id="info-form3"
          class="info-form"
          >
        <div class="progress-bar">
          <div class="left" style="width: 75%"></div>
        </div>
        <div class="title">请先完善您的基本信息 3/4</div>
        <!--个人简介-->
        <div class="form-group" style="height: 31.48vh">
          <label class="title" for="intro">个人简介</label>
          <textarea class="input" id="intro"
                 v-model="formData.intro"
                 placeholder="请介绍一下你自己，可以包括兴趣爱好、特长、专业、过往经验等，让更多的人发现你的价值~"
                 style="height: 26.9vh; top: 4.537vh;width: 38.6vw"
          />
        </div>
        <!--个人简历-->
        <div class="form-group">
          <label class="title" for="CV">个人简历</label>
          <div class="CV-box">
            <img src="../assets/images/profileImg.png" alt="">
            <div class="text1">上传简历，更清晰地介绍自己</div>
            <div class="text2">支持PDF、DOC、DOCX等格式</div>
            <button>
              <img src="../assets/images/arrow.png" alt="">
              上传简历附件
              <input
                  class="profile-input"
                  id="upload-resume"
                  type="file"
                  accept="*.pdf *.doc"
                  @change="handleResumeChange"
              />
            </button>
          </div>
        </div>
        <button class="back-button" @click="goToPreviousPage">{{ isLoading ? "返回中..." : "上一步" }}</button>
        <button class="next-button" @click="goToNextPage" type="submit" :disabled="isLoading">{{ isLoading ? "提交中..." : "下一步" }}</button>
      </form>

      <!--第四页-->
      <form
          v-else-if="currentPage === 4"
          id="info-form4"
          class="info-form"
          >
        <div class="progress-bar">
          <div class="left" style="width: 100%"></div>
        </div>
        <div class="title">请先完善您的基本信息 4/4</div>
        <img class="user-avatar" :src="formData.avatar" alt="">
        <button class="upload-avatar">上传头像
          <input
              class="avatar-input"
              id="upload-avatar"
              type="file"
              accept="image/*"
              @change="handleAvatarChange"
          />
        </button>

        <div class="upload-prompt">
          点击上传头像
          <br>从电脑相册中选择一张你喜欢的头像
          <br>或者从下方选择默认头像</div>
        <div class="avatar-box">
          <img src="https://img.js.design/assets/smartFill/img317164da746310.jpg" alt="">
          <img src="https://img.js.design/assets/smartFill/img320164da746310.jpg" alt="">
          <img src="https://img.js.design/assets/smartFill/img333164da748e08.jpg" alt="">
          <img src="https://img.js.design/assets/smartFill/img318164da746310.jpg" alt="">
        </div>

        <button class="back-button" @click="goToPreviousPage">{{ isLoading ? "返回中..." : "上一步" }}</button>
        <button class="next-button" type="button"
                :disabled="isLoading" @click="handleCompleteInfo"
        >
          {{ isLoading ? "提交中..." : "完成" }}
        </button>
      </form>

      <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
    </div>
  </div>

</template>

<script>
import {computed, nextTick, onMounted, ref, watch} from "vue";

// 引入日期插件
import flatpickr from "flatpickr";
import "flatpickr/dist/flatpickr.min.css"; // 引入基础样式
import { Mandarin } from "flatpickr/dist/l10n/zh"; // 引入中文语言包
/*import { monthSelectPlugin } from "flatpickr/dist/plugins/monthSelect/index";*/
// 引入城市选择器
import {completeInfo} from "@/api/completeInfo";
import {useAvatarUpload} from "@/api/uploadAvatar";
import {useResumeUpload} from "@/api/uploadResume";
/*import { ElMessage } from "element-plus";*/

export default {
  name: "CompleteInfoPage",

  setup() {
    const formData = ref({
      name: "",
      isNameShow: false,
      gender: "male",
      city: "",
      birthdate: "",
      intro: "",
      vxNumber: "",
      resume: "",
      identity: 1, // 0代表未验证学生，1代表社会人士，2代表已完成认证的学生
      school: "",
      graduateYear: "",
      avatar: "https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66",
      resumeName:""
    });
    const { handleCompleteInfo, isLoading0 } = completeInfo(formData);
    const { handleAvatarChange,isLoading } = useAvatarUpload(formData);
    const { handleResumeChange,isLoading2 } = useResumeUpload(formData);
    // 当前页面编号
    const currentPage = ref(1);
    /*const formData = ref({
      name: "",
      isNameShow:"false",
      gender: "male",
      city:"",
      birthdate: "",
      intro:"",
      vxNumber:"",
      resume:"",
      identity: 1, //0代表未验证学生-目前学信网未接入，暂不支持、1代表社会人士、2代表已完成认证的学生
      school:"",
      graduateYear:"",
      avatar:""
    });*/
    const startDate = ref("")
    const endDate = ref("")
    const errorMessage = ref("");
    // 日期
    const datePickerRef = ref(null);
    /*const startDatePickerRef = ref(null);
    const endDatePickerRef = ref(null);*/
    // 定义更新日期的函数
    const updateDate = (selectedDates, dateStr) => {
      formData.value.birthdate = dateStr; // 更新日期数据
    };
/*    const updateStartDate = (selectedDates, dateStr) => {
      startDate.value = dateStr; // 更新入学时间
    };*/
/*    const updateEndDate = (selectedDates, dateStr) => {
      formData.value.graduateYear = dateStr; // 更新毕业时间
    };*/
    // 初始化 flatpickr 日期选择器的函数
    const initializeFlatpickr = () => {
      flatpickr(datePickerRef.value, {
        locale: Mandarin, // 设置为中文
        dateFormat: "Y-m-d", // 日期格式
        onChange: updateDate, // 使用上面定义的 updateDate 函数
      });
    };
   /* const initializeStartFlatpickr = () => {
      flatpickr(startDatePickerRef.value, {
        locale: Mandarin,
        dateFormat: "Y-m",
        /!*plugins: [
          monthSelectPlugin({
            shorthand: true,
            dateFormat: "Y-m",
            altFormat: "F Y",
          })
        ],*!/
        onChange: updateStartDate,
      });
    };
    const initializeEndFlatpickr = () => {
      flatpickr(endDatePickerRef.value, {
        locale: Mandarin,
        dateFormat: "Y-m",
        /!*plugins: [
          monthSelectPlugin({
            shorthand: true,
            dateFormat: "Y-m",
            altFormat: "F Y",
          })
        ],*!/
        onChange: updateEndDate,
      });
    };*/
    // 使用 onMounted 钩子初始化 flatpickr
    onMounted(async () => {
      await nextTick();
      if (currentPage.value === 1) {
        initializeFlatpickr();
      }
      /*if (currentPage.value === 2) {
        initializeStartFlatpickr();
        initializeEndFlatpickr();
      }*/
    });

    // 生成年份选项（使用计算属性）
    const years = computed(() => generateYearOptions());
    // 生成年份选项方法
    const generateYearOptions = () => {
      const startYear = 1920; // 起始年份
      const endYear = 2099;   // 结束年份
      const yearOptions = [];
      for (let year = endYear; year >= startYear; year--) {
        yearOptions.push(year);
      }
      return yearOptions;
    };
    // 监听入学时间变化
    watch(startDate, (newStartDate) => {
      if (newStartDate && (!endDate.value || parseInt(endDate.value) - parseInt(newStartDate) !== 4)) {
        endDate.value = String(parseInt(newStartDate) + 4); // 将计算结果转换为字符串
      }
    });
    // 监听毕业时间变化
    watch(endDate, (newEndDate) => {
      if (newEndDate && (!startDate.value || parseInt(newEndDate) - parseInt(startDate.value) !== 4)) {
        startDate.value = String(parseInt(newEndDate) - 4); // 默认入学时间为毕业时间-4年
      }

      // 自动填充 formData.graduateYear 为 "毕业年份 + 6月"
      formData.value.graduateYear = newEndDate ? `${newEndDate}年6月` : '';
      console.log(2222,formData.value.graduateYear) ;
    });


    // 监听 currentPage 的变化，初始化 flatpickr
    watch(currentPage, async (newPage) => {
      await nextTick();
      if (newPage === 1) {
        initializeFlatpickr();
      }
     /* if (newPage === 2) {
        initializeStartFlatpickr();
        initializeEndFlatpickr();
      }*/
    });


    // 城市


    // 计算属性，判断是否为社会人士
    const isPublicFigure = computed(() => {
      return formData.value.identity === 1;
    });


    // 下一步（进入下一个页面）
    const goToNextPage = () => {
      if(currentPage.value === 1){
        /*if (!formData.value.name) {
          ElMessage.error("请填写您的姓名");
          return;
        }
        if (!formData.value.birthdate) {
          ElMessage.error("请选择您的出生日期");
          return;
        }
        if (!formData.value.city) {
          ElMessage.error("请输入您的所在城市");
          return;
        }*/
        if (!formData.value.name) {
          alert("请填写您的姓名");
          return;
        }
        if (!formData.value.birthdate) {
          alert("请选择您的出生日期");
          return;
        }
        if (!formData.value.city) {
          alert("请输入您的所在城市");
          return;
        }
      }
      if(currentPage.value === 2){
        if(formData.value.identity === 1){
          if (!formData.value.vxNumber) {
            alert("请填写您的微信号");
            return;
          }
        }
        else{
          if (!formData.value.school) {
            alert("请填写您的学校");
            return;
          }
          if (!formData.value.graduateYear) {
            alert("请选择您的就读时间");
            return;
          }
          if (!formData.value.vxNumber) {
            alert("请填写您的微信号");
            return;
          }
        }
      }
      if(currentPage.value === 4){
        if (!formData.value.avatar) {
          alert("请选择您的头像");
          return;
        }
      }
      // 页面跳转
      if (currentPage.value < 4) {
        currentPage.value++;
        console.log(formData.value);
      }
    };
    // 上一步（返回上一个页面）
    const goToPreviousPage = () => {
      if (currentPage.value > 1) {
        currentPage.value--;
      }
    };



    return {
      formData,
      startDate,
      endDate,
      isLoading,
      isLoading0,
      isLoading2,
      errorMessage,
      goToNextPage,
      goToPreviousPage,
      currentPage,
      datePickerRef,
      isPublicFigure,
      handleCompleteInfo,
      years,
      handleAvatarChange,
      handleResumeChange,
    };
  }
};
</script>

<style scoped>
.container{
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  opacity: 1;
  background: rgba(13, 127, 233,1);
}
.content-container{
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  mix-blend-mode: multiply;
  opacity: 0.4;
  background-image: url(https://img.js.design/assets/img/67126011e0f24202bd7b38e6.jpg#d6a994dc674792754e4055c0c873da62);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.info-container {
  position: absolute;
  left: 14.79vw;
  top: 8.61vh;
  width: 70.417vw;
  height: 82.87vh;
  border-radius: 1.6667vw;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 1.198vw  rgba(0, 95, 204, 0.9);
  backdrop-filter: blur(2.71vw);
}
.left-box{
  position: relative;
  left: 0;
  top: 0;
  width: 22.917vw;
  height: 82.87vh;
  border-radius: 1.6667vw 0 0 1.6667vw;
  background: rgba(199, 228, 255, 0.5);
}
.text1{
  position: absolute;
  left: 4.635vw;
  top: 5.37vh;
  width: 13.646vw;
  height: 6.852vh;
}
.text5{
  position: absolute;
  left: 4.4vw;
  top: 18.61vh;
  width: 14vw;
  height: 26.204vh;
}
.text2{
  position: absolute;
  left: 5.937vw;
  bottom: 27.515vh;
  width: 11.042vw;
  height: 5.926vh;
  font-size: 2.5vw;
  font-weight: normal;
  letter-spacing: 0.2604vw;
  line-height: 3.290vw;
  color: rgba(13, 127, 233, 1);
  text-align: center;
  vertical-align: middle;
}
.text3{
  position: absolute;
  left: 5.937vw;
  bottom: 20.078vh;
  width: 11.042vw;
  height: 5.926vh;
  font-size: 2.5vw;
  font-weight: normal;
  letter-spacing: 0.2604vw;
  line-height: 3.290vw;
  color: rgba(13, 127, 233, 1);
  text-align: center;
  vertical-align: middle;
}
.text4{
  position: absolute;
  left: 3.593vw;
  bottom: 7.222vh;
  width: 15.781vw;
  height: 8.8889vh;
  font-size: 0.8333vw;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.6667vw;
  color: rgba(153, 153, 153, 1);
  text-align: center;
  vertical-align: middle;
}

.info-form{
  position: absolute;
  left: 25.83vw;
  top: 4.90vh;
  width: 42.76vw;
  height: 74.257vh;
}
.progress-bar{
  left: 0;
  top: 0;
  width: 100%;
  height: 0.926vh;
  border-radius: 17.86vw;
  background: rgba(217, 217, 217, 1);
  margin-bottom: 3.7vh;
}
.progress-bar .left{
  position: absolute;
  left: 0;
  top: 0;
  width: 25%;
  height: 0.926vh;
  background: rgba(238, 113, 62, 1);
}
.title{
  left: 0;
  top: 0;
  width: 14.79vw;
  font-size: 1.25vw;
  font-weight: 700;
  letter-spacing: 0;
  color: rgba(32, 32, 32, 1);
  text-align: left;
  vertical-align: top;
  margin-bottom: 3.704vh;
}
.form-group {
  position: relative;
  height: 10vh;
  width: 29.427vw;
  margin-bottom: 3.704vh;
}
.form-group .title{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  font-size: 1.042vw;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(32, 32, 32, 1);
  text-align: left;
  vertical-align: top;
}
.form-group .input{
  position: absolute;
  left: 0;
  bottom: 0;
  padding-left: 0.75vw;
  padding-right: 0.75vw;
  font-size: 1.042vw;
  color: rgba(32, 32, 32, 1);
  width: 27.527vw;
  height: 5.363vh;
  border-radius: 0.417vw;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(217, 217, 217, 1);
}
textarea{
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 1.1vh 0.75vw;
  font-size: 1.042vw;
  color: rgba(32, 32, 32, 1);
  width: 27.527vw;
  height: 5.363vh;
  border-radius: 0.417vw;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(217, 217, 217, 1);
  resize: none;
}
textarea:focus{
  outline: none;
}
.showName{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1.042vw;
  height: 1.852vh;
}
.showNameText{
  position: absolute;
  bottom: 0.27vh;
  left: 1.8vw;
  height: 2.22vh;
  line-height: 2.22vh;
  font-size: 0.833vw;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(102, 102, 102, 1);
  text-align: left;
  vertical-align: top;
}
.choose-input1{
  position: absolute;
  left: 0;
  bottom: 1.15vh;
  width: 1.15vw;
  height: 1.15vw;
}
.choose-label1{
  position: absolute;
  left: 2vw;
  bottom: 1vh;
  font-size: 1.042vw;
}
.choose-input2{
  position: absolute;
  left: 5vw;
  bottom: 1.15vh;
  width: 1.15vw;
  height: 1.15vw;
}
.choose-label2{
  position: absolute;
  left: 7vw;
  bottom: 1vh;
  font-size: 1.042vw;
}
.startDate{
  position: absolute;
  left: 0;
  bottom: 0;
  padding-left: 0.75vw;
  padding-right: 0.75vw;
  font-size: 1.042vw;
  color: rgba(153, 153, 153, 1);
  width: 8vw;
  height: 5.363vh;
  border-radius: 0.417vw;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(217, 217, 217, 1);
}
.startDate:focus{
  outline: none;
}
.endDate{
  position: absolute;
  right: 5.5vw;
  bottom: 0;
  padding-left: 0.75vw;
  padding-right: 0.75vw;
  font-size: 1.042vw;
  color: rgba(153, 153, 153, 1);
  width: 8vw;
  height: 5.363vh;
  border-radius: 0.417vw;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(217, 217, 217, 1);
}
.endDate:focus{
  outline: none;
}
.month-label {
  position: absolute;
  bottom: 0;
  font-size: 1.042vw;
  color: rgba(153, 153, 153, 1);
  height: 5.363vh;
  line-height: 5.363vh;
}
.zhi{
  position: absolute;
  left: 12.5vw;
  bottom: 0;
  font-size: 1.042vw;
  color: rgba(153, 153, 153, 1);
  height: 5.363vh;
  line-height: 5.363vh;
}
button {
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s;
  width: 6.42vw;
  height: 4.65vh;
  border-radius: 0.417vw;
  background: rgba(238, 113, 62, 1);
  border: 1.5px solid rgba(238, 113, 62, 1);
  font-size: 1.042vw;
}
.next-button{
  position: absolute;
  right: 2.5vw;
  bottom: 0;
}
.back-button{
  position: absolute;
  right: 11vw;
  bottom: 0;
  background: rgba(255, 255, 255, 1);
  border: 1.5px solid rgba(238, 113, 62, 1);
  color: rgba(238, 113, 62, 1);
}
button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
.next-button:hover {
  background-color: #ED843E;
  border: 1.5px solid #ED843E;
}

/*个人简历*/
.CV-box{
  position: absolute;
  width: 40.1vw;
  height: 11.29vh;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(217, 217, 217, 1);
  border-radius: 0.417vw;
  top: 4.537vh;
}
.CV-box .text1{
  position: absolute;
  left: 7.08vw;
  top: 2.585vh;
  width: 15.26vw;
  font-size: 1.042vw;
  letter-spacing: 0;
  color: rgba(102, 102, 102, 1);
  text-align: left;
  vertical-align: top;
}
.CV-box .text2{
  position: absolute;
  left: 7.08vw;
  top: 4.39vh;
  width: 15.26vw;
  font-size: 0.833vw;
  letter-spacing: 0;
  text-align: left;
  vertical-align: top;
  color: rgba(153, 153, 153, 1);
}
.CV-box button{
  position: absolute;
  right: 2.35vw;
  top: 3.89vh;
  width: 13.44vw;
  height: 3.82vh;
  border-radius: 14.1vw;
  background: rgba(238, 113, 62, 1);
  font-size: 0.833vw;
  cursor: pointer;
}
.CV-box button .profile-input{
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 14.1vw;
  border: none;
  cursor: pointer;
  opacity: 0;
}
.CV-box img{
  position: absolute;
  left: 1.975vw;
  top: 1.65vh;
  width: 3.6vw;
  height: 3.6vw;
}
.CV-box button img{
  position: absolute;
  left: 2.85vw;
  top: 0.85vh;
  width: 0.78vw;
  height: 0.78vw;
}
/*用户头像*/
.user-avatar{
  position: absolute;
  left: 16.6vw;
  top: 11.96vh;
  width: 8.5vw;
  height: 8.5vw;
  background: rgba(204, 204, 204, 1);
  border-radius: 50%;
}
/*上传头像*/
.upload-avatar{
  position: absolute;
  left: 17vw;
  top: 32.85vh;
  width: 7.67vw;
  height: 4.35vh;
  border-radius: 0.417vw;
  background: rgba(238, 113, 62, 1);
  border: 1.5px solid rgba(238, 113, 62, 1);
}
.upload-avatar .avatar-input{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.417vw;
  opacity: 0;
}
.upload-prompt{
  position: absolute;
  left: 14.17vw;
  top: 39.26vh;
  width: 13.33vw;
  height: 7.5vh;
  font-size: 0.833vw;
  letter-spacing: 0;
  line-height: 1.4vw;
  color: rgba(51, 51, 51, 1);
  text-align: center;
  vertical-align: top;

}
.avatar-box{
  position: absolute;
  left: 5.5vw;
  top: 52.46vh;
  width: fit-content;
  height: 12.04vh;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.avatar-box img{
  left: 0;
  top: 0;
  width: 12.04vh;
  height: 12.04vh;
  background: rgba(204, 204, 204, 1);
  display: flex;
  border-radius: 50%;
  margin-right: 3.125vw;
}


.error {
  color: red;
  text-align: center;
  margin-top: 1rem;
}
::placeholder{
  font-size: 1.042vw;
  letter-spacing: 0;
  color: rgba(153, 153, 153, 1);
  text-align: left;
  vertical-align: middle;
}

input:focus{
  outline: 1px solid rgba(238, 113, 62, 1);
}
.showName:focus{
  outline:none
}
.choose-input1:focus{
  outline:none
}
.choose-input2:focus{
  outline:none
}
</style>
